<template>
  <div class="app-container">
    <myApprovals class="left" title="审批申请" @setComponent="setComponent"></myApprovals>
    <card :title="title" class="right">
      <template v-slot:content>
        <div class="content">
          <!-- <component :is="componentName" ref="component" /> -->
          <personalFinish ref="personalFinish" v-if="componentName=='personalFinish'" />
          <personalWaiting ref="personalWaiting" v-else />
        </div>
      </template>
    </card>
  </div>
</template>

  <script>
import card from "@/views/homePage/components/card";
import personalWaiting from "./components/personalWaiting.vue";
import personalFinish from "./components/personalFinish.vue";
import myApprovals from "./components/myApprovals.vue";
export default {
  data() {
    return {
      activeTab: "myApprovals",
      title: "",
      componentName: "personalWaiting"
    };
  },
  components: {
    card,
    myApprovals,
    personalWaiting,
    personalFinish
  },
  methods: {
    handleClick() {},
    setComponent(apply, component) {
      this.componentName = component;
      this.$nextTick(() => {
        if (component == "personalFinish") {
          this.$refs.personalFinish.queryParams.processDefinitionName =
            apply.processDefinitionName;
          this.$refs.personalFinish.getList();
        } else {
          this.$refs.personalWaiting.queryParams.processDefinitionName =
            apply.processDefinitionName;
          this.$refs.personalWaiting.getList();
        }
      });
      if (apply==""){
        this.title =
        component == "personalWaiting"
          ? `待审批`
          : `已处理`;
      }else {
        this.title =
          component == "personalWaiting"
            ? `待审批（${apply.processDefinitionName}）`
            : `已处理（${apply.processDefinitionName}）`;
      }
    }
  }
};
</script>

  <style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  padding: 0.125rem;
  overflow: hidden;
  background: #edefef;
  letter-spacing: 0.02rem;
  display: flex;
  .left {
    height: 100%;
    width: 300px;
    background: #ffffff;
    margin-right: 0.125rem;
  }
  .right {
    height: 100%;
    width: calc(100% - 300px - 0.125rem);
    background: #ffffff;
    // margin-right: 0.125rem;
  }
}
.content {
  width: 100%;
  height: 100%;
}
</style>
